<template>
  <div>
     <div>
      <h1>基本资料</h1>
     </div>
     <div>
      <el-form :model="formModel" :rules="rules">
        <el-form-item label="登录名称">
          <el-input disabled v-model="formModel.username"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="formModel.nickname"></el-input>
        </el-form-item>
         <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="formModel.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toEdit">提交修改</el-button>
        </el-form-item>
      </el-form>
     </div>
  </div>
</template>

<script setup>
   import {reactive} from 'vue'
   import {userStore} from '@/store/user.js'
   import {userUpdateInfoService} from '@/api/use'
   import mitt from '@/utils/mitt'
   let uStore=userStore() //调用的pinia
  // 用reactive 创建的v-model数据
  let formModel=reactive({
        username:uStore.userObj.username, //从pinia获取登录用户名
        nickname:uStore.userObj.nickname,
        email:uStore.userObj.email
  })
  // 表单验证数据
  let rules={
    nickname:[
      { required:true,message:'昵称必填',trigger:'blur'},
      { min:2,max:10,message:'2-10位的昵称',trigger:'blur'}
    ],
    email:[
       { required:true,message:'邮箱必填',trigger:'blur'},
       {pattern:/\w+@\w+(\.\w+)+/,message:'邮箱不符合规则',trigger:'blur'}
    ]
  }

  // 调用提交修改用户信息接口
  let toEdit=async ()=>{
    console.log(uStore.userObj.id,'888888888888')
    let res=await userUpdateInfoService({
      id:uStore.userObj.id,
      nickname:formModel.nickname,
      email:formModel.email})
    console.log(res,"^^^^^^^^^^")
      if(res.code==0){
        ElMessage.success("修改用户信息成功")
        // 去触发头部组件的从新获取用户信息
        mitt.emit("senduser")
      }
  }
</script>
